<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="date">
              <el-date-picker v-model="searchForm.date" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
                @change="(value) => {return dateChange(value,'searchForm')}" :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="name">
              <el-input clearable placeholder="请输入运营商名称" v-model="searchForm.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search(true)">搜索</el-button>
              <el-button type="success" @click="search">刷新</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="table" border>
          <el-table-column prop="admin_id" label="ID" width="70"></el-table-column>
          <el-table-column prop="name" label="运营商"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="is_draw" label="已划账"></el-table-column>
          <el-table-column prop="dis_draw" label="未划账">
            <template slot-scope="scope">
              <span style="color:#F56C6C">{{scope.row.dis_draw}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination @size-change="(val) =>{return handleSizeChange(val,'searchForm', 'search')}"
            @current-change="(val) =>{return handleCurrentChange(val,'searchForm', 'search')}" :current-page="searchForm.page"
            :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
          </el-pagination>
        </div>
      </el-card>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDateFun } from '@/untils/common.js'
import { getAgentDrawList } from '@/network/api.js'

export default {
  name: 'agentdraw',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        date: [
          new Date(new Date(new Date().toLocaleDateString('zh')).getTime()),
          new Date(new Date(new Date().toLocaleDateString('zh')).getTime() + 24 * 60 * 60 * 1000 - 1)
        ],
        start: formatDateFun(new Date(new Date().toLocaleDateString('zh')).getTime()),
        end: formatDateFun(new Date(new Date().toLocaleDateString('zh')).getTime() + 24 * 60 * 60 * 1000 - 1),
        name: ''
      },
      table: [],
      count: 0
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    // 每页条数变化
    handleSizeChange(val, formName, searchFunName) {
      this[formName].limit = val
      this[searchFunName]()
    },
    // 当前页变化
    handleCurrentChange(val, formName, searchFunName) {
      this[formName].page = val
      this[searchFunName]()
    },
    dateChange(v, formName) {
      if (v === null) {
        this[formName].start = ''
        this[formName].end = ''
      } else {
        this[formName].start = v[0]
        this[formName].end = v[1]
      }
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getAgentDrawList(this.searchForm)
        this.table = rtn.list
        this.count = rtn.count
      } catch (e) {
        this.$message.error(e.message)
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
